<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="看房评价" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body">
			<view style="padding:20rpx;" class="intro_con label_con">
				<view class="label_title" style="margin-bottom:10rpx;">全部评价({{commentList.length}})
					<!-- <text style="font-size: 26rpx;color:#999;float:right;" @click="topriceDetail">查看更多></text> -->
				</view>
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<view v-for="(item,index) in commentList" :key="index" style="border-bottom:1rpx solid #f8f8f8;padding-top:20rpx;">
					<view>
						<image :src="item.avatar" style="width:70rpx;border-radius: 50%;" mode="widthFix"></image>
						<view class="dis_inl_blo">
							<text style="margin-left:25rpx;font-size: 26rpx;color:#333;">{{item.username}}</text>
							<view style="margin-left:15rpx;">
								<image v-for="(ite,inde) in item.star" :key="inde" src="https://resourse.cnlhjt.com/upload/20221221/45e84d9a2b19334b0d1d036e36fe827b.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
								<!-- <u-rate :current="5" v-model="comment" size="16" :disabled="true"></u-rate> -->
							</view>
						</view>
					</view>
					<view style="font-size: 26rpx;color:#333;margin:10rpx 0;">
						{{item.content}}
					</view>
					<view style="margin:20rpx 0;">
						<image style="width:160rpx;height:160rpx;border-radius: 15rpx;margin-right:10rpx;" mode="aspectFill" v-for="(ite,inde) in item.images" :key="inde" :src="ite"></image>
					</view>
					
				</view>
			</view>
			<view style="height:120rpx;"></view>
			<view class="fabucomment" style="">
				<view @click="tomoment">发表评论.../</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRentComment
	} from "@/service/rentService.js";
	export default {
		data () {
			return {
				id:0,
				showEmpty:false,
				commentList:[]
			}
		},
		onLoad(options) {
			this.id=options.id;
			getRentComment({
				gid:options.id
			}).then(this.getRentComment)
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.commentList=[];
			        //调接口刷新数据
					getRentComment({
						gid:this.id
					}).then(this.getRentComment)
				}
		},
		methods:{
			getRentComment(e){
				if(e.code==200){
					this.showEmpty=false;
					this.commentList=e.result.data
				}else{
					this.showEmpty=true;
					this.commentList=[]
				}
			},
			tomoment(){
				this.$u.route({
					url: '/pagesHome/houseRent/comment',
					params: {
						id:this.id
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.label_con{
		border-top:20rpx solid #f8f8f8;
	}
	.label_con>text{
		display: inline-block;
		color:#00828a;
		background-color: #e5f2f3;
		border: 1rpx solid #c8eaed;
		border-radius: 8rpx;
		margin:10rpx;
		font-size: 24rpx;
		padding:3rpx 10rpx;
	}
	.intro_con .label_title{
		font-size: 32rpx;
		height:60rpx;
		line-height: 60rpx;
	}
	.fabucomment{
		position: fixed;
		bottom:0;
		width:96%;
		padding:20rpx 2%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 -5rpx 3rpx #aaa;
		view {
			height:60rpx;
			line-height: 60rpx;
			background-color: #f8f8f8;
			color:#aaa;
			padding:0 20rpx;
			margin:20rpx 0;
			border-radius: 30rpx;
			font-size: 26rpx;
		}
		
	}
</style>